/**
 * All rights Reserved, Designed By 信鸥科技
 * project : committee
 * Created by youquer on 17/10/25.
 * 注意：本内容仅限于信鸥科技有限公司内部传阅，禁止外泄以及用于其他的商业目的
 * Description:
 *
 */
//React
import React from 'react';
import PropTypes from 'prop-types';
//Dva
import { Link } from 'dva/router';
import { connect } from 'dva'
//antd
import { Form, Input, DatePicker, Row, Col, Tabs, Icon, Button, Card } from 'antd';
const FormItem = Form.Item;
const TabPane = Tabs.TabPane;
//style
import styles from './RoleAdd.less';
//common
import AddInput from '@/components/common/AddInput';
//import SmartTreeSelectInput from '../../components/common/SigleTreeSelect';
//import Avatar from '../../components/common/UpLoadImage';
import PageHeaderLayout from '@/layouts/PageHeaderLayout';

const RoleAdd = ({role, dispatch}) => {
  /**
   * formItemLayout: 添加页输入框样式,
   * labelCol: 左侧标题 xs:24等分, sm: 宽
   * wrapperCol: 右侧标题 xs, sm: 宽; 数值越大越宽
   * */
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 4 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 20 },
    },
  };

  const formItemTwoLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  /**
   * patrol:model数据
   * loading: 提交按钮加载效果
   * */
  const {type, isUpdate, id, permissionIdsTree, appTree, appId, name, description, permissionIds, isEnable, sort, appName} = role;
  const data = role;

  /**
   * 一排多个输入框的间距
   * */
  const gutter = {gutter: 2};
  var inputcolumns = [];
  if (isUpdate == 1){ //修改
    var disabled = false;
    if (id == 1 || id == 2){
      disabled = true;
    }
    inputcolumns = [
      [
        {
          title: "应用",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          disabled: true,

          key: 'appName',
        },
        {
          title: "名称",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "最多输入10个字",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          max: 10,
          disabled: disabled,

          key: 'name',
        },
      ],
      [
        {
          title: "排序",
          type:"InputNumber",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},

          key: 'sort',
        },
        {
          title: "可用",
          type:"Switch",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},

          checkedChildren: "是",
          unCheckedChildren: "否",

          key: 'isEnable',
        },
      ],
      {
        title: "权限",
        type:"SelectMoreTree",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'permissionIds',
        smart:  permissionIdsTree,
      },
      {
        title: "简介",
        type:"TextArea",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "最多输入300字",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},
        max: 300,

        key: 'description',
      },
    ];
  } else { //添加
    inputcolumns = [
      [
        {
          title: "应用",
          type:"SmartTreeSelectInput",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},

          key: 'appId',
          smart:  appTree,
        },
        {
          title: "名称",
          type:"Input",
          //help: "sshelp",
          hasFeedback: true,
          placeholder: "",
          validateStatus: "",
          required: true,
          formItemLayout: {...formItemTwoLayout},
          max: 10,

          key: 'name',
        },
      ],
      {
        title: "权限",
        type:"SelectMoreTree",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},

        key: 'permissionIds',
        smart:  permissionIdsTree,
      },
      {
        title: "简介",
        type:"TextArea",
        //help: "sshelp",
        hasFeedback: true,
        placeholder: "",
        validateStatus: "",
        required: true,
        formItemLayout: {...formItemLayout},
        max: 300,

        key: 'description',
      },
    ];
  }




  const param = {
    inputcolumns,
    type,
    data,
    gutter,
  };

  //提交按钮
  var addInfo = {appId, name, description, permissionIds};
  const updata = {appId, name, description, permissionIds, isEnable, sort};  function enterLoading(){
    dispatch({
      type:type+"/submit",
      loading:true
    });
    var act = "/add"; //添加
    if (isUpdate == 1){ //修改
      act = "/update";
      dispatch({
        type:type+act,
        payload: updata
      });
    } else {
      dispatch({
        type:type+ act,
        payload:addInfo
      });
    }
  }

  return(
    <PageHeaderLayout title={isUpdate? "修改角色" : "添加角色"} content="">
      <Card bordered={false}>
        <div className={styles.add_div}>
          <AddInput {...param} />
          <div className={styles.submit_div}>
            <Button type="primary" onClick={enterLoading}>
              确定
            </Button>
          </div>
        </div>
      </Card>
    </PageHeaderLayout>
  )
};

export default connect(
  ({role}) => ({role})
)(RoleAdd);
